<template>
  <div class="task_detail">
    <div class="left">
      <div class="bg-white content">
        <PeopleInfo :data="publisher" @refresh="handleRefresh">
          <div class="time">{{ dayjs(taskInfo.createdTime).format('YYYY-MM-DD HH:MM:ss') }}</div>
        </PeopleInfo>
        <div class="task_content mt-5">
          <div class="title">标题：{{ taskInfo.title }}</div>
          <div class="description">描述：{{ taskInfo.description }}</div>
          <div class="bounty">赏金金额：{{ taskInfo.bounty }}</div>
          <div class="bountyNum">赏金数量：{{ taskInfo.bountyNum }}</div>
          <div class="distance">距离：{{ taskInfo.distance }}</div>
          <div class="endTime">截止时间：{{ dayjs(taskInfo.endTime).format('YYYY-MM-DD HH:MM:ss') }}</div>
          <div class="content">
            <Markdown v-model="taskInfo.content" :is-preview="true"></Markdown>
          </div>
          <div class="images" v-for="image in taskInfo.images" :key="image">
            <img :src="image" alt="">
          </div>
        </div>
        <div class="task_info mt-4 flex justify-between items-center gap-8">
          <div class="flex items-stretch gap-5 cursor-pointer text-sm">
            <div
              class="flex gap-1"
              hover:text-gray-400
              v-for="handle in handleList"
              :key="handle.icon"
              @click="handleClick(handle.type, taskId)"
            >
              <div
                v-if="taskInfo[handle.checkedFieldName!]"
                :class="handle.checkedIcon"
                :style="{ color: '#409eff' }"
              ></div>
              <div v-else :class="handle.icon"></div>
              <div>{{ taskInfo[handle.fieldName] || 0 }}</div>
            </div>
          </div>
          <div class="task_status">
            <div class="finish mr-3" v-if="taskInfo.finishBut===0">
              <div class="recipien" >领取人：{{ taskInfo.receiverName }}</div>
              <div class="time" >领取时间：{{ taskInfo.receiveTime&&dayjs(taskInfo.receiveTime).format('YYYY-MM-DD HH:MM:ss') }}</div>
              <ElButton type="primary" @click="handleChangeTaskStatus(2)" >完成任务</ElButton>
            </div>
            <div class="collect mr-3" v-if="taskInfo.receiveBut===0">
              <ElButton type="primary" @click="handleChangeTaskStatus(0)">领取任务</ElButton>
            </div>
            <div class="cancel" v-if="taskInfo.cancelBut===0" >
              <ElButton type="primary" @click="handleChangeTaskStatus(1)">取消任务</ElButton>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white comment">
        <el-tabs v-model="activeTab">
          <el-tab-pane v-for="item in tabList" :label="item.name" :key="item.name" :name="item.id">
            <template v-if="activeTab === 0">
              <Comment :data="commentData" :pagination="pagination" :taskId="taskId" @refresh="handleCommentRefresh"></Comment>
            </template>
            <template v-else>相关内容</template>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="right">
      <div class="hot_topic">
        <HotTopic></HotTopic>
      </div>
      <div class="advertisement"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import {  ElButton } from 'element-plus'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import Markdown from '@/components/Markdown.vue'
import HotTopic from '@/components/HotTopic.vue'
import Comment from '@/components/Comment.vue'

const route = useRoute()

const taskId = computed(() => {
  return route.params.id as string
})

const taskInfo = ref<any>({})
const getTaskInfo = async (id: string) => {
  const result = await service.task.findById(id)
  taskInfo.value = result.data
}
const commentList = ref([])
const pagination = ref({
  pageSize: 10,
  pageNum: 1,
  total: 0,
})

const commentData = computed(()=>({
  list:commentList.value,
  total:0,
}))
const getComments = async () => {
  const queryData = {
    taskId: taskId.value,
    pageSize:pagination.value.pageSize,
    pageNum:pagination.value.pageNum
  }
  const result = await service.comment.list(queryData)
  commentList.value = result.data
}

const publisher = computed(() => ({
  avatar: taskInfo.value.userAvatar,
  name: taskInfo.value.createdName,
  isFollow: false,
  id:taskInfo.value.userId
}))

const handleRefresh=()=>{
  getTaskInfo(taskId.value)
}

const handleCommentRefresh=()=>{
  getComments()
}

onMounted(async () => {
  getTaskInfo(taskId.value)
  getComments()
})

const handleChangeTaskStatus=(type:number)=>{
  service.task.updateTaskStatus({type,taskId:taskId.value})
  
}

const activeTab = ref(0)

const tabList = [
  {
    name: '评论',
    id: 0,
  },
  {
    name: '相关内容',
    id: 1,
  },
]



const handleList = ref([
  {
    icon: 'i-carbon-thumbs-up',
    checkedIcon: 'i-carbon-thumbs-up-filled',
    type: 'liked',
    fieldName: 'likedNum',
    checkedFieldName: 'isLiked',
  },
  {
    icon: 'i-carbon-ibm-watson-assistant',
    type: 'comment',
    fieldName: 'commentNum',
  },
  {
    icon: 'i-carbon-star',
    checkedIcon: 'i-carbon-star-filled',
    type: 'collected',
    fieldName: 'collectedNum',
    checkedFieldName: 'isCollected',
  },
])

const handleClick = async (type: string, id:string|number) => {
  if (type === 'liked') {
    await service.task.likeTask(id)
    getTaskInfo(taskId.value)
  } else if (type === 'collected') {
    await service.task.collectTask(id)
    getTaskInfo(taskId.value)
  }
}


</script>

<style lang="scss" scoped>
.task_detail {
  display: flex;
  gap: 20px;

  .left {
    width: 70%;
    padding-bottom:20px;

    .content {
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 5px;

      .task_status {
        display: flex;
        align-items: center;
      }
    }
    .comment{
      padding: 15px 10px;
      border-radius: 5px;
    }
  }

  .right {
    flex: 1;
  }
}
</style>
